feat(default-app): Simplify pattern list with clickable names and minimal actions #2019
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
There was a problem hiding this comment.
1 issue found across 1 file
Prompt for AI agents (all 1 issues)
Understand the root cause of the following 1 issues and fix them.
<file name="packages/patterns/default-app.tsx">
<violation number="1" location="packages/patterns/default-app.tsx:186">
Use a real link (with an href) or a button here; the current <a> without href is not keyboard accessible.</violation>
</file>
React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.
| Remove | ||
| </ct-button> | ||
| </ct-hstack> | ||
| <a |
Contributor
There was a problem hiding this comment.
Use a real link (with an href) or a button here; the current without href is not keyboard accessible.
Prompt for AI agents
Address the following comment on packages/patterns/default-app.tsx at line 186:
<comment>Use a real link (with an href) or a button here; the current <a> without href is not keyboard accessible.</comment>
<file context>
@@ -173,21 +183,21 @@ export default recipe<CharmsListInput, CharmsListOutput>(
- Remove
- </ct-button>
- </ct-hstack>
+ <a
+ className="pattern-link"
+ onClick={visit({ charm })}
</file context>
Contributor
There was a problem hiding this comment.
Here's a PR: #2022 Replace anchor without href with accessible link or button (merges into #2019)
Review and merge it to apply the changes.
…imal actions Improved the pattern list UI for better usability and cleaner appearance: - Made pattern names clickable links with hover underline (removed Visit button) - Replaced "Remove" button text with trash icon (🗑️) - Changed trash button to ghost variant (transparent background) - Added CSS styling for pattern name hover effects - Increased spacing around action buttons for better visual balance The result is a more intuitive interface where users can click pattern names directly to visit them, and actions are represented with clear visual icons. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
0915c70 to
f2a4a6b
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Improved the pattern list UI for better usability and a cleaner, more modern appearance.
Changes
Pattern Names
Action Buttons
Visual Changes
Before:
After:
Technical Details
<style>tag with.pattern-linkCSS class for hover effects<a>element withclassNameandonClickhandler for pattern namesvariant="destructive"tovariant="ghost"🤖 Generated with Claude Code